<template>
  <div class="wrap">
    <!-- 侧边栏 -->
    <div class="aside">
      <div class="list">
        <p>
          <img
            src="../../imgs/logo.png"
            alt=""
            class="logoHome"
            @click="handleHome"
          />
        </p>
        <p
          @click="() => toPerDetails('/personal')"
          :class="{ select: active === '/personal' }"
        >
          个人资料
        </p>
        <p
          @click="() => toSetPer('/personal/setPersonal')"
          :class="classObject"
        >
          账号设置
        </p>
        <p
          @click="() => toAddRecords('/personal/applicationRecords')"
          :class="{ select: active === '/personal/applicationRecords' }"
        >
          领养记录
        </p>
        <p
          @click="() => toMyReview('/personal/myReview')"
          :class="{ select: active === '/personal/myReview' }"
        >
          我的评论
        </p>
      </div>
    </div>
    <!-- 内容 -->
    <div class="content">
      <router-view> </router-view>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";

const router = useRouter();

const classObject = ref({
  select: false,
});

// 动态类标识
const active = ref(router.currentRoute._value.path);
// 刷新当前页面
const reload = () => {
  active.value = router.currentRoute._value.path;
  handleChange();

  router.push({
    name: router.currentRoute._value.name,
  });
};

// 侧边栏动态高亮
const handleChange = () => {
  console.log(active.value);
  if (active.value === "/personal/setPersonal")
    return (classObject.value.select = true);
  else if (active.value === "/personal/setPersonal/setPwd")
    return (classObject.value.select = true);
  else if (active.value === "/personal/setPersonal/setPhone")
    return (classObject.value.select = true);
  else return (classObject.value.select = false);
};
handleChange();

reload();
const toPerDetails = (v) => {
  active.value = v;
  router.push({ name: "personalDetails" });
};
const toSetPer = (v) => {
  active.value = v;
  handleChange();
  router.push({ name: "setPersonal" });
};
const handleHome = () => {
  router.push({ name: "homeDefault" });
};
const toAddRecords = (v) => {
  active.value = v;
  handleChange();

  router.push({ name: "applicationRecords" });
};
const toMyReview = (v) => {
  active.value = v;
  handleChange();

  router.push({ name: "myReview" });
};
</script>
<style scoped>
* {
  list-style: none;
}
* {
  margin: 0;
}

.wrap {
  display: flex;
  flex-flow: row nowrap;
  width: 100vw;
  height: 100vh;
  background-color: bisque;
  .aside {
    width: 200px;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    margin-left: 100px;
    .list {
      width: 100%;
      p {
        color: #ffeae3;
        font-size: 16px;
        left: 30px;
        width: 100%;
        height: 68px;
        line-height: 68px;
        text-align: center;
        background: #63534d;
        border-left: 3px solid #63534d;
        cursor: default;
        .logoHome {
          width: 100%;
          height: 100%;
          padding: 10px;
        }
      }

      .select {
        color: #423834;
        background: #fcf7f2;
        border-left-color: #f58220;
      }
    }
  }
  .content {
    width: 1000px;
    display: flex;
    flex-flow: column nowrap;
    /* margin-left: 40px; */
    background: #fff;
  }
}
</style>
